<template>
  <div class="main-container">
    <!-- 目标信息 -->
    <div class="data-show">
      <div class="data-title data-title-between">
        <h3>目标信息</h3>
      </div>
      <div class="data-table">
        <el-row class="fixed-row">
          <!-- 定位头像 -->
          <div class="avatar">
            <el-image :src="getImg(userInfo.user_avatar)" fit="contain" />
          </div>
          <!-- 第一个信息部分 -->
          <el-col class="col" :span="7">
            <div class="col-item">
              <label class="col-item-label">昵称：</label>
              <p class="col-item-content">{{ userInfo.user_name ? userInfo.user_name : '暂未提供' }}</p>
            </div>
            <div class="col-item">
              <label class="col-item-label">性别：</label>
              <p class="col-item-content">{{ userInfo.gender ? userInfo.gender : '男' }}</p>
            </div>
          </el-col>
          <!-- 第二个信息部分 -->
          <el-col class="col" :span="7">
            <div class="col-item">
              <label class="col-item-label">平台：</label>
              <p class="col-item-content">{{ getShow(userInfo.system, 'value', systems, 'label') }}</p>
            </div>
            <div class="col-item">
              <label class="col-item-label">所在地：</label>
              <p class="col-item-content">{{ userInfo.area ? userInfo.area : '暂无' }}</p>
            </div>
          </el-col>
          <!-- 第三个信息部分 -->
          <el-col class="col col-padding" :span="10">
            <div class="col-item col-item-fill">
              <label class="col-item-label">简介：</label>
              <p>{{ userInfo.introduction ? userInfo.introduction : '暂无简介' }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 个性化推荐标签 -->
    <div class="data-show">
      <div class="data-title data-title-between">
        <h3>目标个性化推荐标签</h3>
        <div class="data-title-actions">
          <span class="action aniTxtBtn" @click="createGroupTag">生成标签</span>
          <span class="action aniTxtBtn" @click="createGroupPoster">获取推文</span>
          <span class="action aniTxtBtn" @click="linkToGenerate">载体生成</span>
        </div>
      </div>
      <div class="data-table data-tag-content data-tag-content-h">
        <template v-if="personTags.length > 0">
          <el-tag class="data-tag" type="primary" v-for="(item, index) in personTags" :key="index">{{ item }}</el-tag>
        </template>
        <div class="tag-empty" v-else>
          <h6 class="tag-data-empty">暂无标签</h6>
        </div>
      </div>
    </div>
    <!-- 底下的两列布局 -->
    <el-row class="m_t-2" :gutter="20">
      <el-col :span="18">
        <Condition v-if="recommends.length > 0">
          <Recommend 
            v-for="(item, index) in recommends" 
            :content="item.content"
            :user="item.user"
            :images="item.resource"
            :system="item.system"
            :supportNums="item.like_num"
            :commentNums="item.comment_num"
            :forwardNums="item.re_num"
            :time="item.collect_time"
            :key="index"
          ></Recommend>
        </Condition>
        <Condition v-else>
          <div class="recommend-empty">
            <i class="iconfont icon-wushuju1 data-empty-icon"></i>
            <h3 class="data-empty">暂无数据</h3>
          </div>
        </Condition>
      </el-col>
      <el-col class="flex-col" :span="6">
        <!-- 统计数据部分 -->
        <div class="data-show m_t-0">
          <div class="data-title">
            <h3>统计数据</h3>
          </div>
          <div class="data-table group-info">
            <div class="group-info-item">
              <h4 class="count">{{ groupInfo.member_count !== null ? groupInfo.member_count : '-' }}</h4>
              <span class="title">群组成员数</span>
            </div>
            <div class="group-info-item">
              <h4 class="count">{{ groupInfo.poster_count !== null ? groupInfo.poster_count : '-' }}</h4>
              <span class="title">群组动态数</span>
            </div>
          </div>
        </div>
        <!--  群组推荐标签部分 -->
        <div class="data-show m_t-15">
          <div class="data-title">
            <h3>群组推荐标签</h3>
          </div>
          <div class="data-table data-tag-content">
            <template v-if="groupTags.length > 0">
              <div class="common-row">
                <div class="common-item-tag item-10">
                  <h4>NDCG</h4>
                  <h4>{{ groupTagsNDCG ? groupTagsNDCG : '-' }}</h4>
                </div>
              </div>
              <el-tag class="data-tag" type="primary" v-for="(item, index) in groupTags" :key="index">{{ item }}</el-tag>
            </template>
            <div class="tag-empty" v-else>
              <h6 class="tag-data-empty">暂无群组推荐标签</h6>
              <h6 class="tag-data-empty">请点击生成标签</h6>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, computed, onActivated } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { API } from '@/utils/status';
import Condition from '@/components/common/Condition.vue';
import Recommend from '@/components/common/recommend.vue';
import avatar from '@/assets/images/four/avatar.jpeg';
import useAppStore from '@/stores/app';
import * as request from '@/api/recommend';
// ==========> 假数据


const defaultUserInfo = {
  user_name: '',
  gender: '',
  system: 2,
  area: '',
  introduction: '',
  user_avatar: ''
};
// <==========


// ============> data <============
const appStore = useAppStore();
const route = useRoute();
const router = useRouter();
const userId = ref(null);
const platformId = ref(null);

const systems = ref([]);
const userInfo = ref({
  user_name: '',
  gender: '',
  system: null,
  area: '',
  introduction: '',
  user_avatar: ''
});
// 个性化标签
const personTags = ref([]);
// 群组统计数据
const groupInfo = ref({
  member_count: null,
  poster_count: null
});
// 群组标签
const groupTags = ref([]);
// 群组标签系数
const groupTagsNDCG = ref(null);
// 群组推文数据
const recommends = ref([]);

const getShow = computed(() => {
  return function (v, k, arr, returnKey) {
    let obj = arr.find((item) => item[k] === v);
    let res = obj ? obj[returnKey] : "";
    return res;
  };
});
const getImg = computed(() => {
  return function (img){
    // return img ? `${API.generate.staticUrl}${img}` : avatar;
    return img ? `${import.meta.env.VITE_APP_BASE_API}/${img}` : avatar;
  }
});

// ============> hooks <============
init()
onActivated(() => {
  init();
});

// ============> methods <============
function getSystems(){
  request.getPlatform()
    .then(res => {
      let result;
      if (res) {
        result = JSON.parse(res);
        systems.value = result && result.code === 200 && result.data ? result.data : [];
      }
    })
}
// 初始化目标信息、个性化标签、群组推文
function init(){
  // todo - 这里获取平台后，用户的平台信息没有回显，需要查看处理
  getSystems();
  userId.value = route && route.query && route.query.userId;
  platformId.value = route && route.query && route.query.platformId ? route && route.query && route.query.platformId : null;
  getUserInfo();
  getUserTag();
  getGroupStatisticalInfo();
}
function getUserInfo(){
  request.getUserInfoById({
    userId: userId.value,
    platformId: platformId.value
  })
    .then(res => {
      let result;
      if (res){
        result = JSON.parse(res);
        userInfo.value = result && result.code === 200 && result.data ? result.data : defaultUserInfo;
        // todo - 这里目标信息中的平台没有回显，需要查看处理
        userInfo.value.system = platformId.value;
      }
    })
}
function getUserTag(){
  request.geTagByUser({
    userId: userId.value,
    platformId: platformId.value
  })
    .then(res => {
      let result = JSON.parse(res);
      if (result && result.code === 200 && result.data && result.data.tags && Array.isArray(result.data.tags)){
        personTags.value = result.data.tags;
      } else {
        let msg = result.msg || result.message || '生成个性化标签失败，请稍后重试或联系管理员';
        ElMessage.error(msg);
      }
    })
}
function getGroupStatisticalInfo(){
  request.getGroupInfo({
    userId: userId.value,
    platformId: platformId.value
  })
    .then(res => {
      let result = JSON.parse(res);
      if (result && result.code === 200 && result.data){
        groupInfo.value.member_count = result.data.member_count;
        groupInfo.value.poster_count = result.data.poster_count;
      } else {
        let msg = result.msg || result.message || '获取群组统计数据失败，请稍后重试或联系管理员';
        ElMessage.error(msg);
      }
    })
}
// 生成群组标签
function createGroupTag(){
  appStore.openLoading('生成群组标签中...');
  request.getTagByGroup({
    userId: userId.value,
    platformId: platformId.value,
    page: 1
  })
    .then(res => {
      appStore.closeLoading();
      let result = JSON.parse(res);
      if (result && result.code === 200 && result.data && result.data.tags && Array.isArray(result.data.tags)){
        groupTags.value = result.data.tags;
      } else {
        let msg = result.msg || result.message || '生成群组标签失败，请稍后重试或联系管理员';
        ElMessage.error(msg);
      }
    })
    .catch(err => {
      console.log(err);
      appStore.closeLoading();
    })
}
// 获取群组推文
function createGroupPoster(){
  appStore.openLoading('获取群组推文中...');
  request.getPosterByGroup({
    userId: userId.value,
    platformId: platformId.value,
    page: 1
  })
    .then(res => {
      appStore.closeLoading();
      let result;
      if (res){
        result = JSON.parse(res);
        // if (result.code === 200 && result.data)
        if (result && result.data && result.data.posters){
          recommends.value = result.data.posters;
          ElMessage.success('获取群组推文成功');
          if (Array.isArray(recommends.value) && recommends.value.length > 0){
            recommends.value.forEach(recommend => {
              if (Array.isArray(recommend.resource) && recommend.resource.length > 0 ){
                recommend.resource.forEach(item => {
                  item.srcList = [getImg.value(item.resource_url)];
                })
              }
            })
          }
        } else {
          ElMessage.error('获取群组推文失败，请稍后重试或联系管理员');
        }
      }
    })
    .catch(err => {
      console.log(err);
      appStore.closeLoading();
    })
}
// 跳转生成
function linkToGenerate(){
  if (platformId.value === null || userId.value === null){
    ElMessage.warning('获取用户及平台信息失败，请稍后重试或联系管理员!');
    return;
  }  
  router.push({ 
    name: 'generate',
    query: {
      userId: userId.value,
      platformId: platformId.value
    } 
  });
}

</script>
<style lang='scss' scoped>
@import '@/assets/styles/mixin.scss';
.condition-item {
  width: 48%;
  height: 50px;
  margin: 0;
}
.data-table-filter {
  @include flex-around-center;
}
.data-title-between {
  @include flex-between-center;
  .data-title-actions {
    display: flex;
  }
}
.fixed-row {
  height: 100px;
  // background-color: red;
  width: calc(100% - 100px);
  margin-left: 100px;
  position: relative;
  // 头像部分
  .avatar {
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    // background-color: yellow;
    padding: 10px;
    .el-image {
      border-radius: 8px;
    }
  }
  .col {
    padding: 10px;
    .col-item {
      width: 100%;
      height: 30px;
      line-height: 30px;
      display: flex;
      margin: 5px 0;
      .col-item-label {
        color: var(--color-gray-10);
      }
      .col-item-content {
        @include text-overflow;
      }
    }
    .col-item-fill {
      display: block; 
      height: 100%;
      margin: 5px 0;
    }
  }
  .col-padding {
    padding-top: 5px;
  }
}
.data-tag-content {
  // min-height: 250px;
  min-height: 100px;
}
.tag-empty {
  width: 100%;
  min-height: 100px;
  background-color: var(--color-gray-5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .tag-data-empty {
    // color: var(--color-white-10);
    color: var(--color-main-5);
    font-size: 16px;
    margin: 10px;
  }
}
.data-tag {
  margin: 10px 10px;
  cursor: pointer;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.article-item {
  width: 100%;
  margin-top: 10px;
}
.article-item-flex {
  @include flex-around-center;
  .yzx-label {
    margin-right: 5px;
    color: var(--color-gray-10);
  }
  .yzx-content {
    color: var(--color-black-10);
  }
}
.recommend-empty {
  width: 100%;
  height: 48vh!important;
  // background-color: var(--color-main-3);
  background-color: var(--color-gray-5);
  @include flex-all-center;
  // 无数据提示语
  .data-empty {
    // color: var(--color-white-10);
    color: var(--color-main-5);
    font-size: 28px;
  }
  // 无数据图标
  .data-empty-icon {
    // color: var(--color-white-10);
    color: var(--color-main-5);
    font-size: 80px;
  }
}
.common-item-tag {
  width: 100%;
  height: 50px;
  border: 1px solid var(--color-main-border);
  border-radius: 6px;
  padding: 10px 15px;  
  background-color: var(--color-gray-2);
  overflow: hidden;
  @include flex-around-center;
}
.group-info {
  @include flex-all-center;
  flex-direction: column;
  text-align: center;
  .group-info-item {
    margin: 15px 0;
    .count {
      font-size: 24px;
    }
  }
}
</style>